<template>
  <section class="wrapper">
    <section class="top" :style="{backgroundImage: `url(${loginBg})`}">
      <img src="../assets/images/login-logo-text.png" alt="">
      <img src="../assets/images/login-logo.png" alt="">
    </section>
    <form class="login-content layui-form" @submit.prevent>
      <section class="label">
        <img src="../assets/images/user.png" alt="">
        <input v-model="phone" name="phone" lay-verify="phone" type="text" placeholder="手机号">
      </section>
      <section class="label">
        <input v-model="verifyCode" lay-verify="required" name="verifyCode" type="text" placeholder="验证码">
        <span class="get-code" @click="getCode">{{ seconds ? seconds + 's' : '获取验证码'}}</span>
      </section>
      <button lay-submit="" lay-filter="login" class="login-btn">
        登录
      </button>
    </form>
    <section class="login-by-code" @click="$router.push({name: 'LoginByCode'})">
      使用账号登录
    </section>
    <common-modal title="账号不存在" :visible.sync="showModal">
      <template #footer>
        <a class="btn" href="javascript:;" @click="showModal = false">知道了</a>
      </template>
    </common-modal>

  </section>
</template>
<script>
import {getSmsCode, login} from '@/api/login'
import loginBg from '../assets/images/login-bg.png'

export default {
  name: 'Login',
  data: () => ({
    loginBg,
    form: null,
    timer: null,
    seconds: 0,
    showModal: false,
    phone: '',
    verifyCode: ''
  }),
  mounted() {
    layui.use('form', () => {
      this.form = layui.form
      this.form.on('submit(login)', data => {
        // this.showModal = true
        login({
          prjName: 'MATCH',
          userName: data.field.phone,
          verCode: data.field.verifyCode
        }).then(res => {
          this.$storage.setData('userInfo', res.userInfo)
          this.$storage.setData('token', res.token)
          layer.msg('登录成功', {icon: 1})
          setTimeout(() => this.$router.push('/'), 2000)
        }).catch(err => {
          console.log(err)
        })
      })
    })
  },
  methods: {
    // login() {
    //   this.showModal = true
    // },
    getCode() {
      if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.phone)) return layer.msg('请输入正确的手机号', {icon: 5})
      if (this.timer) return
      getSmsCode({phone: this.phone}).then(() => {
        this.seconds = 60
        this.timer = setInterval(() => {
          this.seconds--
          if (this.seconds === 0) {
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .wrapper {
    min-height: 100vh;
    background: rgb(243, 251, 255);
  }

  .top {
    width: 100%;
    height: 11.467rem;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;

    img {
      display: block;
      margin: 0.933rem auto;
      width: 8.173rem;
    }
  }

  .login-content {
    transform: translateY(-3.467rem);
    position: relative;
    margin: 0 0.533rem;
		margin-bottom: -2.4rem;
    padding: 0.933rem;
    background-color: #ffffff;
    box-shadow: 0rem 0.053rem 0.4rem 0rem rgba(41, 128, 232, 0.1);
    border-radius: 0.133rem;

    .label {
      margin-bottom: 0.4rem;
      padding: 0.2rem 0;
      display: flex;
      align-items: center;
      border-bottom: solid 0.027rem #e0e9ff;

      input {
        padding: 0 0.267rem;
        font-size: 0.427rem;
        color: #7b8197;
        width: 4.5rem;
      }

      .get-code {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 2.427rem;
        height: 1.067rem;
        background-color: #1958d6;
        border-radius: 0.133rem;
        color: #fff;
        font-size: 0.373rem;
        font-weight: normal;
        font-stretch: normal;
      }
    }

    .login-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -0.667rem;
      .flex;
      justify-content: center;
      width: 6.267rem;
      height: 1.333rem;
      background-image: linear-gradient(225deg,
      #2b78ee 0%,
      #1f63de 50%,
      #1958d5 75%,
      #134dcd 100%);
      border-radius: 0.667rem;
      font-family: SourceHanSansSC-Regular;
      font-size: 0.48rem;
      color: #ffffff;
    }

    img {
      width: 0.427rem;
    }
  }

  .login-by-code {
    width: 100%;
    /*left: 0;*/
    /*position: absolute;*/
    /*bottom: 0.933rem;*/
    text-align: center;
    font-size: 0.373rem;
    color: #144fce;
  }
</style>
